<template>
  <div class="operation-wrapper">
    <div class="tree">
      <el-tree
        ref="treeRef"
        node-key="pkid"
        :props="defaultProps"
        :data="treeData"
        :default-checked-keys="defaultCheckedKeys"
        show-checkbox
      />
    </div>
    <div class="bottom">
      <el-button @click="handleCancle" :loading="loading">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMenuPri, menuAddBatch } from '@/api/manager/systemManage/menu.js'
const props = defineProps({
  roleId: {
    type: String,
  },
})
const defaultProps = ref({
  label: 'catalogName',
  children: 'children',
})
const treeData = ref([])
const defaultCheckedKeys = ref([])
const loading = ref(false)
const initTreeData = async () => {
  const res = await getMenuPri({ roleId: props.roleId })
  treeData.value = res.data.menuList[0].children
  const selectedArr = []
  findValueInTree(treeData.value, selectedArr)
  defaultCheckedKeys.value = selectedArr
}
watch(
  () => props.roleId,
  (newVal) => {
    if (newVal) {
      initTreeData()
    }
  },
  {
    immediate: true,
  },
)
const treeRef = ref()

const getAllCheckedKeys = () => {
  let checkedKeys = treeRef.value.getCheckedKeys() // 获取直接选中的节点
  const getAllCheckedKeys = (nodes) => {
    nodes.forEach((node) => {
      if (node.children && node.children.length) {
        getAllCheckedKeys(node.children) // 递归遍历子节点
      }
      if (node.checked && !checkedKeys.includes(node.pkid)) {
        checkedKeys.push(node.pkid) // 如果当前节点是选中状态，并且不在直接选中键的数组中，则添加
      }
    })
  }
  getAllCheckedKeys(treeData.value) // 假设 treeData 是你的整个树结构数据
  return checkedKeys
}

const handleSubmit = async () => {
  const selectedKeys = getAllCheckedKeys()
  const halfSelectedKeys = treeRef.value.getHalfCheckedKeys()
  console.log('selectedKeys', selectedKeys, halfSelectedKeys)
  const params = {
    roleId: props.roleId,
    resourceIds: [...selectedKeys, ...halfSelectedKeys],
  }
  loading.value = true
  try {
    const res = await menuAddBatch(params)
    if (res.success) {
      ElMessage.success('保存成功')
    } else {
      ElMessage.error(res.message)
    }
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}
const handleCancle = () => {
  initTreeData()
}
const findValueInTree = (childrenArr, findArr) => {
  if (!childrenArr || childrenArr.length === 0) {
    return
  }
  childrenArr.forEach((item) => {
    if (item.hasPri && (!item.children || item.children.length === 0)) {
      findArr.push(item.pkid)
    } else {
      findValueInTree(item.children, findArr)
    }
  })
}
</script>
<style lang="scss" scoped>
.operation-wrapper {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 0 0 4px 4px;
  .tree {
    width: 100%;
    height: calc(100% - 70px);
    box-sizing: border-box;
    padding: 20px;
    overflow-y: auto;
  }
  .bottom {
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    border-top: 1px solid #d5deed;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
